<template>
  <div>
     <div>
       <el-divider content-position="left">
         <b style="color: #67C23A">闲鱼产品映射配置模块</b>
         <h style="color: red">（非闲鱼店铺管理员禁止操作!!）</h>
       </el-divider>

       <el-form :model="queryParams" ref="queryXYForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="商品名称" prop="name" >
           <el-input
             v-model="queryParams.name"
             placeholder="请输入商品名称"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item label="商品id" prop="goodsId">
           <el-input
             v-model="queryParams.goodsId"
             placeholder="请输入商品id"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item label="虚充id" prop="productId">
           <el-input
             v-model="queryParams.productId"
             placeholder="请输入虚充产品id"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>

       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
             type="primary"
             plain
             icon="el-icon-plus"
             @click="handleAdd"
           >新增</el-button>
         </el-col>
       </el-row>


       <el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName">>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="商品id" align="center" prop="goodsId"/>
         <el-table-column label="虚充产品id" align="center" prop="productId" />
         <el-table-column label="产品名称" align="center" prop="name" />
         <el-table-column label="产品描述" align="center" prop="description" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button
               type="success" plain
               icon="el-icon-edit"
               @click="handleUpdate(scope.row)"
             >修改</el-button>
             <el-button
               type="danger" plain
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <pagination
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.current"
         :limit.sync="queryParams.pageSize"
         @pagination="queryXYFrom"
       />

       <!-- 添加或修改平台账户对话框 -->
       <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
         <el-form ref="form" :model="form"  label-width="85px"><!--:rules="rules"-->
           <el-form-item label="商品名称" prop="name">
             <el-input v-model="form.name" placeholder="请输入商品名称" />
           </el-form-item>
           <el-form-item label="商品id" prop="goodsId">
             <el-input v-model="form.goodsId" placeholder="请输入淘宝商品id" />
           </el-form-item>
           <el-form-item label="虚充产品id" prop="productId">
             <el-input v-model="form.productId" placeholder="请输入虚充产品id" />
           </el-form-item>
           <el-form-item label="描述"  prop="description">
             <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.description" placeholder="请输入描述" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="submitXYForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </el-dialog>

     </div>




  </div>
</template>
<script>
import axios from 'axios'
export default {

    created() {
      this.queryXYFrom();
    },

  data() {
    return {
          // 遮罩层
          loading: true,
          // 是否显示弹出层
          open: false,
          tableData: [],
          total: 0,
          queryParams:{
            current: 1,
            pageSize: 10,
            goodsId:null,
            productId:null,
            name:null,
          },
          // 显示搜索条件
          showSearch: true,
          title: "",
          // 表单参数
          form: {},

    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {

    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      axios.get('http://47.110.49.47:8093/ApiInterface/selectOne/'+ id)
        .then(res => {
          console.log(res.data.data)
          if (res.data.code ==200){
            this.form = res.data.data;
            this.open = true;
            this.title = "修改商品映射";
          }
        })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品配置";
    },
    /** 提交按钮 */
    submitXYForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form)
          if (this.form.id != null) {
            axios.post('http://47.110.49.47:8093/ApiInterface/updateXYConfig', this.form)
              .then(res =>{
                if (res.data.code ==200){
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.queryXYFrom();
                }else {
                  this.$modal.msgError(res.data.message)
                  this.open = false;
                  this.queryXYFrom();
                }
              }).catch(res=>{
              this.$modal.msgError("修改失败")
              this.open = false;
              this.queryXYFrom();
            })
          } else {
            axios.post('http://47.110.49.47:8093/ApiInterface/addXYConfig', this.form)
              .then(res =>{
                if (res.data.code ==200){
                  this.$modal.msgSuccess("添加成功");
                  this.open = false;
                  this.queryXYFrom();
                }else {
                  this.$modal.msgError(res.data.message)
                  this.open = false;
                  this.queryXYFrom();
                }
              }).catch(res=>{
              this.$modal.msgError("添加失败")
              this.open = false;
              this.queryXYFrom();
            })
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$modal.confirm('是否确认删除产品id为"' + id + '"的数据项？').then(function() {
        axios.get('http://47.110.49.47:8093/ApiInterface/delXYConfig/'+ id)
      }).then(() => {
        this.queryXYFrom();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        goodsId: null,
        productId: null,
        description:null,
        name: null,
      };
      this.xyForm("form");
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryXYFrom();
    },
    resetQuery() {
      this.xyForm("queryXYForm");
      this.queryXYFrom();
    },
    queryXYFrom(){
      this.loading = true;
      axios.post('http://47.110.49.47:8093/ApiInterface/queryXYConfig', this.queryParams)
        .then(res => {
          if (res.data.code ==200){
            this.tableData = res.data.data.data;
            this.total = res.data.data.total;
          }
          this.loading = false;
          // 根据需要处理响应数据
        })
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'success-row';
      }
      return '';
    },

    xyForm(){
      this.queryParams.goodsId = '';
      this.queryParams.name = '';
      this.queryParams.productId = '';
      this.$refs.queryXYForm.resetFields();
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
